<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>

    <script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>

    <script>

        $(function(){
            $("#upload").click(function(){

                var formData=new FormData();
                formData.append("id",1);
                formData.append("name",$("#name").val());
                var file=$("#file")[0].files[0];
                formData.append("file",file);

                console.log(formData)

                $.ajax({
                    url:"${pageContext.request.contextPath}/upload",
                    type:"post",
                    data:formData,
                    //在使用二进制数据进行提交时候
                    //不对FormData中的数据进行url编码
                    //不使用application/x-www-form-urlencoded
                    //而是将FormData中的数据原样发给服务器
                    processData:false,
                    //不修改contentType属性，使用FormData默认的contentType值
                    contentType:false,
                    success:function(message){
                        alert(message);
                    }
                });
            });
        });

    </script>
</head>
<body>
    <form id="uploadForm">
        姓名：<input id="name" type="text" name="name"/><br/>
        文件：<input id="file" type="file" name="file"/><br/>
        <input id="upload" type="button" value="提交"/>
    </form>
</body>
</html>
